<template>
  <!-- 跨组件 -->
  <!-- 整个组件vue实例底下的placeholder属性就是拿到的值 -->
  <input type="text" :placeholder="TodoListIns.placeholder" v-model="content" />
</template>

<script>
export default {
  name: "TodoInput",
  //拿到TodoList组件provide的属性
  // inject: ["placeholder"],
  inject: ["TodoListIns"],
  data() {
    return {
      content: "",
    };
  },
  //问题3：如何让父组件知道子组件数据被修改了？
  //解决方案：子组件通过watch监听data定义的属性的变化
  watch: {
    content() {
      if (this.content.length > 0) {
        //向父组件传递事件，并把content传递过去
        this.$emit("changeContent", this.content);
      }
    },
  },
  mounted() {
    // console.log(this.TodoListIns);
    //打印的是整个组件vue实例 VueComponent{...}
  },
  methods: {
    //清空输入框内容
    reset() {
      this.content = "";
    },
  },
};
</script>